<template>
	<view class="WareItem" @tap="goToDetail()" @longpress="onLongPress">
		<template v-if="!!item.imgUrl">
			<image class="image" :src="item.imgUrl" mode="widthFix"></image>
		</template>
		<template v-else>
			<view class="loading-box"></view>
		</template>
		<view class="header">
			<view class="name">
				{{item.name}}
			</view>
			<view class="count" :style="{color: item.count < 2 ? '#dd1109' : '#222'}">
				{{item.count}}
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			item: Object,
			getListData: Function
		},
		methods: {
			goToDetail() {
				uni.navigateTo({
					url: `/pages/WareEdit/WareEdit?id=${this.item._id || ''}`
				})
			},
			onLongPress() {
				const _this = this;
				uni.showModal({
					title: '提示',
					content: '是否删除此物品',
					async success(res) {
						if (res.confirm) {
							await uni.request({
								url: `${_this.BASE_URL}/ware/del/${_this.item._id}`,
								method: 'GET'
							})
							_this.getListData();
							console.log('删除')
						} else if (res.cancel) {
							console.log('取消')
							return
						}
					}
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.WareItem {
		border-radius: 12rpx;
		border: 1px solid #e4e6eb;
		margin: 20rpx 20rpx;
		.header {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 20rpx;
			.count {
				font-weight: bold;
			}
		}
		.image {
			width: 100%;
		}
		.loading-box {
			width: 100%;
			height: 200rpx;
			background-color: #ededed;
			background: linear-gradient( 100deg, rgba(255, 255, 255, 0) 40%, rgba(255, 255, 255, .5) 50%, rgba(255, 255, 255, 0) 60%) #ededed;
			background-size: 200% 100%;
			background-position: 120%;
			animation: 1s loading ease-in-out infinite;
		}
	}
	
	@keyframes loading {
		to {
			background-position: -20%;
		}
	}
</style>